<template>
    <div class="chat-layout" :class="{'chat-layout-reduce': reduce}">
        <div class="layouts-mains">
            <div class="chat-left">
                <div class="chat-logo">
                    <a-avatar
                        :size="40"
                        shape="square"
                        :src="fullUrl(siteConfig.logo)"
                        :alt="siteConfig.siteName"
                        @click="userInfo.isLogin() ? $router.push('/users') : login_show = !login_show"
                    />
                </div>
                <leftNav />
                <div class="chat-bottom">
                    <a-tooltip placement="rightBottom" color="lime">
                        <template #title>联系客服</template>
                        <div class="chat-bottom-item">
                            <Icon name="iconfont icon-kefu" size="20"/>
                        </div>
                    </a-tooltip>

                    <a-tooltip placement="right">
                        <template #title>{{ isDark ? '黑夜' : '白天' }}</template>
                        <div class="chat-bottom-item" @click="toggleDark()">
                            <Icon v-if="isDark" name="iconfont icon-qingtianwanshang" size="20"/>
                            <Icon v-else name="iconfont icon-baitian-qing" size="20"/>
                        </div>
                    </a-tooltip>
                    <a-tooltip placement="right">
                        <template #title>{{ reduce? '展开布局' : '缩放布局' }}</template>
                        <div class="chat-bottom-item" @click="chat_reduce">
                            <Icon v-if="reduce" name="iconfont icon-fangda" size="20"/>
                            <Icon v-else name="iconfont icon-suoxiao" size="20"/>
                        </div>
                    </a-tooltip>
                    <a-tooltip placement="rightBottom" color="#ffffff">
                        <template #title><userShow /></template>
                        <div class="chat-bottom-item">
                            <div>
                                <a-avatar
                                    :src="fullUrl(userInfo.avatar)"
                                    @click="userInfo.isLogin()? $router.push('/users') : login_show = !login_show"
                                >
                                    <template #icon>
                                        <Icon name="iconfont icon-jurassic_user" size="18"/>
                                    </template>
                                </a-avatar>
                            </div>
                        </div>
                    </a-tooltip>
                </div>
            </div>
            <div class="chat-container">
                <router-view></router-view>
            </div>
            <Login :visible="login_show" />
        </div>
        <mobileNav></mobileNav>
    </div>
</template>

<script setup lang="ts">
import '/@/assets/web/scss/chat/chat.scss'
import { ref, provide, watch } from 'vue'
import { initialize } from '/@/api/frontend/index'
import { useUserInfo } from '/@/stores/userInfo'
import Login from "/@/layouts/frontend/components/login.vue"
import toggleDark from "/@/utils/useDark";
import { useConfig } from '/@/stores/config'
import { useSiteConfig } from '/@/stores/siteConfig'
import {fullUrl, isMobileWidth} from "/@/utils/common";
import { webConfig } from '/@/api/frontend/chat/webConfig'
import leftNav from "/@/layouts/frontend/components/chat/leftNav.vue"
import mobileNav from "/@/layouts/frontend/components/chat/mobileNav.vue"
import userShow from "/@/layouts/frontend/components/left/user_show.vue"
import {useAiLayoutConfig} from "/@/stores/aiLayoutConfig";

const config = useConfig()
const siteConfig = useSiteConfig()
const login_show = ref(false)
const userInfo = useUserInfo()
const isDark = ref(config.layout.isDark)
const aiLayoutConfig = useAiLayoutConfig()
const reduce = ref(aiLayoutConfig.layout.scale)
if (isMobileWidth()) {
    reduce.value = false
}

watch(() => config.layout.isDark, (value) => {
    isDark.value = value
})
provide('login_show', login_show)
const chat_reduce = () => {
    reduce.value = !reduce.value
    aiLayoutConfig.layout.scale = reduce.value
}

webConfig()
initialize()
</script>

<style scoped lang="scss">
.chat-layout-reduce {
    min-height: 480px;
    max-width: 1200px;
    height: 90vh!important;
    margin: 50px auto;
    border-radius: 10px;
    box-shadow: 50px 50px 100px 10px rgba(0,0,0,.1);
    overflow: hidden;
    box-sizing: border-box;
}
.chat-layout {
    height: 100vh;
}
.layouts-mains {
    display: flex;
    height: 100%;
    .chat-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 64px;
        padding: 16px 0;
        background-color: var(--ct-left-bg-color);
        border-right: 1px solid var(--ct-border-color);
        .chat-logo {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 40px;
            &:hover {
                cursor: pointer;
            }
        }
        .chat-bottom {
            display: flex;
            flex-direction: column;
            width: 40px;
            padding-bottom: 8px;
            .chat-bottom-item {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 40px;
                height: 32px;
                margin-bottom: 20px;
                cursor: pointer;
            }
        }
    }
    .chat-container {
        flex: 1;
    }
}
@media (max-width: 768px) {
    .chat-layout-reduce {
        margin: 0!important;
    }
    .layouts-mains {
        flex-direction: column;
        height: calc(100% - 50px);
        .chat-container {
            flex: 1;
            height: 100%;
        }
    }
    .chat-layout {
        height: 100%;
        .chat-left {
            display: none;
        }
    }
}
</style>
